<template>
  <div class="content">
    <heading grade='1'>学员信息</heading>
    <el-form ref="form" v-bind="getFormProps()">
      <el-form-item label="姓名：" prop="name" :rules="[
              { required: true, message: '请输入学员姓名'},
              { min: 2, message: '请输入全名'},
              Object.assign({trigger: 'blur'}, validator.rule.userName)
            ]">
        <el-col :span="18">
          <el-input :maxlength="40" v-model.trim="form.name" placeholder="请输入学员姓名" v-focus></el-input>
        </el-col>
      </el-form-item>
      <el-form-item label="性别：" prop="sex" :rules="[
              { required: true, message: '请选择性别'},
            ]">
        <el-radio-group v-model="form.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="国籍：" prop="nationality" :rules="[
              { required: true, message: '请选择国籍'},
            ]">
        <el-row>
          <el-col :span="18">
            <el-select v-model="form.nationality" placeholder="请选择国籍" style="width: 100%" filterable>
              <el-option v-for="item in country_list" :key="item.id" :value="item.countryCode" :label="item.countryChineseName">
              </el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="证件号码：" prop="idNo" :rules="[
              { required: true, message: '请输入有效证件号码'},
              Object.assign({trigger: 'blur', validator: validator.rule.isIp.validator.bind(this)})
            ]">
        <el-row>
          <el-col :span="4">
            <el-select v-model="form.idType" style="width: 90%">
              <el-option
                v-for="item in ipList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="14">
            <el-input v-model="form.idNo" placeholder="请输入有效证件号码" @blur="handleIp(form.idNo)"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="出生日期：" prop="birthday" :rules="[
              { required: false, message: '请选择出生日期'},
            ]">
        <el-row>
          <el-col :span="18">
            <el-date-picker
              :editable="true"
              v-model="form.birthday"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions"
              style="width: 100%">
            </el-date-picker>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="学员住址：" prop="address">
        <el-row>
          <el-col :span="18">
            <el-input :maxlength="200" v-model="form.address" placeholder="请输入学员住址"></el-input>  
          </el-col>  
        </el-row>
      </el-form-item>
      <el-form-item label="家长姓名： " prop="parentName" :rules="[
          { min: 2, message: '请输入全名'},
          Object.assign({trigger: 'blur'}, validator.rule.userName)
        ]">
        <el-row>
          <el-col :span="18">
            <el-input :minlength="2" :maxlength="40" v-model="form.parentName" placeholder="请输入学员家长姓名"></el-input>
          </el-col>  
        </el-row>
      </el-form-item>
      <el-form-item label="家长手机：" prop="parentMobile" :rules="[
            { required: true, message: '请输入手机号'},
            Object.assign({trigger: 'blur'}, validator.rule.mobile)
          ]">
        <el-row>
          <el-col :span="18">
            <el-input v-model="form.parentMobile" placeholder="请输入手机号"></el-input>
          </el-col>  
        </el-row>
      </el-form-item>
       <el-form-item label="购买课程：" prop="trainStudentSignupVOs" :rules="[
            { required: true, message: '请选择购买的课程'}
          ]">
        <el-row>
          <el-col :span="24">
            <cascader-group placeholder="请输入课程/校区/班别" :options="courseInfoList" v-model="transfer"/>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="备注：" prop="remark">
        <el-row>
          <el-col :span="18">
            <el-input :maxlength="200" v-model.trim="form.remark"></el-input>
          </el-col>
        </el-row>
      </el-form-item>
      <div class="button-box">
        <!-- <el-form-item> -->
          <router-link to="/training/student">
            <el-button>取消</el-button>
          </router-link>
          <el-button type="primary" native-type="submit" :loading="loading">保存</el-button>
        <!-- </el-form-item> -->
      </div>
    </el-form>
  </div>
</template>

<script>
import { form } from 'utils/mixins'
import validator from 'utils/validator'
import cascaderGroup from './components/CascaderGroup'
import { mapGetters } from 'vuex'
import api from 'api/train'
export default {
  mixins: [form],
  components: {
    cascaderGroup
  },
  computed: {
    ...mapGetters({
      train_student_info: 'train_student_info', // 学员信息
      country_list: 'country_list'
    })
  },
  data () {
    return {
      validator,
      transfer: [],
      loading: false,
      form: {
        name: '',
        sex: 1,
        nationality: '',
        idType: 1,
        idNo: '',
        address: '',
        birthday: '',
        parentMobile: '',
        parentName: '',
        trainStudentSignupVOs: [],
        remark: ''
      },
      ipList: [
        {
          value: 1,
          label: '身份证'
        },
        {
          value: 2,
          label: '护照'
        },
        {
          value: 3,
          label: '其他证件'
        }
      ],
      courseInfoList: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        }
      }
    }
  },
  created () {
    if (this.$route.path === '/training/student/edit') {
      this.$store.dispatch('train_student_info', {studentId: this.$route.query.id})
      api.studentInfo({studentId: this.$route.query.id}).then(res => {
        if (res.data.trainStudentSignupVOs && res.data.trainStudentSignupVOs.length) {
          this.courseInfoList = res.data.trainStudentSignupVOs.map((item, index) => {
            return {
              signupFee: item.signupFee,
              value: [item.courseId, item.schoolId, item.classesId, item.id],
              signupType: item.signupType,
              disabled: item.signupType === 0
            }
          })
          this.allIds = res.data.trainStudentSignupVOs.map(item => {
            return item.id
          })
        }
      })
    }
    this.$store.dispatch('country_list')
  },
  watch: {
    transfer (value) {
      if (this.$route.path === '/training/student/add') {
        this.form.trainStudentSignupVOs = value.map((item, index) => {
          return {
            signupFee: item.signupFee,
            courseId: item.value[0],
            schoolId: item.value[1],
            classesId: item.value[2]
          }
        })
      } else {
        this.form.trainStudentSignupVOs = value.map((item, index) => {
          return {
            signupFee: item.signupFee,
            courseId: item.value[0],
            schoolId: item.value[1],
            classesId: item.value[2],
            id: item.value[3]
          }
        })
        this.existIds = value.map(item => {
          return item.value[3]
        })
        this.deleteSignupIds = this.allIds.filter((item, index) => {
          if (this.existIds.indexOf(item) === -1) {
            return item
          }
        })
      }
    },
    train_student_info (value) {
      this.form.name = value.trainStudent.name
      this.form.sex = value.trainStudent.sex
      this.form.address = value.trainStudent.address
      this.form.nationality = value.trainStudent.nationality
      this.form.idType = value.trainStudent.idType
      this.form.idNo = value.trainStudent.idNo
      this.form.birthday = new Date(value.trainStudent.birthday).getTime()
      this.form.parentMobile = value.trainStudent.parentMobile
      this.form.parentName = value.trainStudent.parentName
      this.form.remark = value.trainStudent.remark
      this.form.trainStudentSignupVOs = value.trainStudentSignupVOs
    }
  },
  methods: {
    handleIp (value) {  // 根据身份证自动输入生日日期
      if (this.form.idType) {
        this.form.birthday = new Date(`${value.substring(6, 10)}-${value.substring(10, 12)}-${value.substring(12, 14)}`).getTime() // es6语法
      }
    },
    submit () {
      let data = Object.assign({id: this.$route.query.id}, this.form)
      delete data.birthday
      delete data.trainStudentSignupVOs
      if (this.$route.path === '/training/student/edit') {
        let addData = Object.assign({birthday: this.form.birthday ? new Date(this.form.birthday).getTime() : ''}, data)
        let newData = Object.assign({trainStudent: addData}, {trainStudentSignupVOs: this.form.trainStudentSignupVOs}, {deleteSignupIds: this.deleteSignupIds})
        api.editStudent(JSON.stringify(newData), {context: this, successMsg: '修改成功'}).then(res => {
          history.back()
        })
      } else {
        delete data.id
        let addData = Object.assign({birthday: this.form.birthday ? new Date(this.form.birthday).getTime() : ''}, data)
        let newData = Object.assign({trainStudent: addData}, {trainStudentSignupVOs: this.form.trainStudentSignupVOs})
        api.editStudent(JSON.stringify(newData), {context: this, successMsg: '新增成功'}).then(res => {
          history.back()
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .el-radio-group .el-radio {
    min-width: 40px;
  }
}
</style>
